<script setup>
import ButtonCounter from '../components/ButtonCounter/ButtonCounter.vue'
import BlogPost from '../components/BlogPost/BlogPost.vue'
import AlertBox from '../components/AlertBox/AlertBox.vue'
import MyButton1 from '../components/MyButton/MyButton1.vue'
import MyButton2 from '../components/MyButton/MyButton2.vue'
import { ref } from 'vue'

const posts = ref([
  { id: 1, title: 'My journey with Vue' },
  { id: 2, title: 'Blogging with Vue' },
  { id: 3, title: 'Why Vue is so fun' }
])
const postFontSize = ref(1)
const count = ref(1)
const text = ref('')

function increaseCount(n, m, o) {
  // console.log(n,m,o) // 参数按照顺序传递
  count.value += n
}
</script>

<template>
  <div>
    <h1>Here is a child component!</h1>
    <ButtonCounter />
    <hr />
    <!-- 传递props -->
    <!-- <BlogPost v-for="post in posts" :key="post.id" :title="post.title" /> -->
    <!-- 在模板控制博客文章文字大小 -->
    <div :style="{fontSize: postFontSize + 'em'}">
      <BlogPost v-for="post in posts" :key="post.id" :title="post.title" @enlarge-text="postFontSize+=0.1" />
    </div>
    <hr />
    <AlertBox>
      Something bad happened.
    </AlertBox>
    <hr />
    <!-- 事件参数 有时候我们会需要在触发事件时附带一个特定的值。 -->
    <!-- <MyButton @increase-by="(n) => count += n" /> -->
    <MyButton1 @increase-by="increaseCount" />
    <div>{{count}}</div>
    <hr />
    <MyButton2 @submit="({email,password})=>{text = email + '--' + password}" />
    <div>提交内容：<span>{{text}}</span></div>
    <hr />
  </div>
</template>
